<template>
  <div class="tinymce">
    <textarea :id="tinymceId" style="visibility: hidden"></textarea>
    <editor-image class="upload"></editor-image>
  </div>
</template>

<script>
  import editorImage from './components/editorImage'
  export default {
    name: 'tinymce',
    components:{editorImage},
    props:{
      id: {
        type: String
      },
      value: {
        type: String,
        default: ''
      },
      toolbar: {
        type: Array,
        required: false,
        default() {
          return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright | image |rotateleft rotateright | flipv fliph | editimage imageoptions']
        }
      },
      menubar: {
        type: String,
        required: false,
        default: ''
      }
    },
    data () {
      return {
        //使用 ‘+’ 号，这个操作是将该元素转换秤Number类型
        tinymceId: this.id || 'tinymceID_' + +new Date(),
        editorChanged: false
      }
    },
    watch:{
      value: function (newValue) {
        if(!this.editorChanged && this.editor){
          // console.log('outer value changed to -' + newValue)
          this.editor.setContent(newValue)
        }
      }
    },
    created: function(){
      console.log('tinymce created')
    },
    mounted: function(){
      console.log('tinymce mounted')
      this.initTinymce()
    },
    beforeDestroy: function () {
      console.log('tinymce beforeDestroy')
      this.destroyTinymce()
    },
    activated: function () {
      console.log('tinymce activated')
      this.initTinymce()
    },
    deactivated: function(){
      console.log('tinymce deactivated')
      this.destroyTinymce()
    },
    methods: {
      initTinymce: function() {
        let self = this
        window.tinymce.init({
          selector: `#${this.tinymceId}`,
          language: "zh_CN",
          // theme: 'mobile',
          resize: true,
          toolbar: this.toolbar,
          menubar: this.menubar,
          plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, image, imagetools',
          link_context_toolbar: true,
          init_instance_callback: editor => {
            //记录生成的实例
            this.editor = editor
            //根据属性设置editor content
            if(self.value){
              editor.setContent(self.value)
            }
            //监视editor变化事件，将变化传播到外面 v-model
            editor.on("NodeChange Change KeyUp", (e)=>{
              // console.log(`editor event ${e.type} - ` + editor.getContent({ format: 'raw' }))
              self.editorChanged = true
              self.$emit("input", editor.getContent({ format: 'raw' }))
            })
          }
        })
      },
      destroyTinymce() {
        if (window.tinymce.get(this.tinymceId)) {
          window.tinymce.get(this.tinymceId).destroy()
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  .tinymce{
    position: relative;

    .upload{
      position: absolute;
      top: 12px;
      right: 12px;
    }
  }
</style>
